<template>
	<view class="content">
		<text class="gongzuoshi">米椒工作室</text>
	</view>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
	.content {
		padding: 0 16rpx;
		width: 100%;
		height: 1000rpx;
		// border: 1px solid red;
		display: flex;
		justify-content: center;
		align-items: center;

		.gongzuoshi {
			font-family: 'Arial', sans-serif;
			/* 选择一个合适的字体 */
			font-size: 2.5em;
			/* 设置字体大小 */
			font-weight: bold;
			/* 加粗字体 */
			// color: #FF6347;
			/* 设置字体颜色，这里使用了一种鲜艳的红色 */
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
			/* 添加文本阴影 */
			background: linear-gradient(45deg, #FFD700, #FF8C00);
			/* 添加背景渐变 */
			-webkit-background-clip: text;
			/* 将背景渐变应用于文本 */
			-webkit-text-fill-color: transparent;
			/* 使文本颜色透明，以便显示背景渐变 */
			margin: 20px;
			/* 设置外边距 */
			display: inline-block;
			/* 使元素成为行内块级元素，以便应用外边距和背景 */
			// border: 2px solid #FF6347;
			/* 添加边框，颜色与文本颜色相匹配 */
			padding: 10px 20px;
			/* 设置内边距，使文本周围有一些空间 */
			border-radius: 10px;
			/* 添加圆角边框 */
			// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			/* 添加盒子阴影 */
			transition: all 0.3s ease;

			/* 添加过渡效果 */
			&:hover {
				color: #FFD700;
				/* 鼠标悬停时改变文本颜色（尽管文本是透明的，这里为了完整性还是写上） */
				text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
				/* 鼠标悬停时改变文本阴影 */
				transform: scale(1.05);
				/* 鼠标悬停时稍微放大文本 */
			}
		}
	}
</style>